<template>
  <!--碟子旋转播放-->
  <div class="dish">
    <div class="imgrotation" :style='{transform:"rotate("+redg+"deg)"}'>
      <img :src="info.al.picUrl" alt />
    </div>
    <ul>
      <li>歌曲：{{info.name}}</li>
      <li @click="skipGrabble('GrabbleType100',info.ar[0].id)">歌手：{{info.ar[0].name}}</li>
      <li @click="skipGrabble('albumPage',info.al.id)">专辑：{{info.al.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "dish",
  data(){
      return{
          redg:0,
          time1:null
      }
  },
  props: ["info"],
  methods: {
    skipGrabble(path, val) {
      const newUrl = this.$router.resolve({
        name: path,
        query: {
          keyWord: val
        }
      });
      window.open(newUrl.href, "_blank");
    },
    rotate(){
        this.time1=window.setInterval(()=>{
            //console.log(this.$store.state.isPlay)
            if(this.$store.state.isPlay){
              this.redg++
            }
        },30)
    },
    stop(){
        window.clearInterval(this.time1)
    }
  },
  mounted(){
    this.rotate()
  }
};
</script>

<style lang="less" scoped>
.dish {
  width: 200px;
  margin: 0 auto;
  .imgrotation {
    width: 200px;
    height: 200px;
    background-image: url(~@/assets/img/die.png);
    background-size: contain;
    //transform: ;
    img {
      width: 100px;
      border-radius: 50%;
      display: block;
      margin: 0 auto;
      flex: none;
      transform: translateY(50px);
    }
  }
  ul {
    margin: 20px 0;
    padding: 0;
    text-align: center;
    cursor: pointer;
    li {
      margin: 10px 0;
    }
  }
}
</style>